<template>
	<div class="container">
		<search-date
			@getChangeTime="getChangeTime"
			:initTimeDatas="initTimeDatas"
		></search-date>
		<!--
		<Department @getdepartcode="getDepartCode"></Department>-->
		<section class="data">
			<!-- v-for -->
			<div>
				<h2>源检查数</h2>
				<h3>{{ titleData.source_exam_cnt }}</h3>
			</div>
			<div>
				<h2>已采集质量数</h2>
				<h3>{{ titleData.archive_exam_cnt }}</h3>
			</div>
			<div
				v-if="titleData.exam_difference_cnt !== 0"
				@click="getDiffrenceDetail"
				data-state="exam"
				data-name="检查差异数"
			>
				<h2 data-state="exam" data-name="检查差异数">检查差异数</h2>
				<h3 class="underline" data-state="exam" data-name="检查差异数">
					{{ titleData.exam_difference_cnt }}
				</h3>
			</div>
			<div>
				<h2>已采集影像数</h2>
				<h3>{{ titleData.archive_image_cnt }}</h3>
			</div>
			<div
				v-if="titleData.image_difference_cnt !== 0"
				@click="getDiffrenceDetail"
				data-name="影像差异数"
				data-state="movie"
			>
				<h2 data-state="movie" data-name="影像差异数">影像差异数</h2>
				<h3 class="underline" data-state="movie" data-name="影像差异数">
					{{ titleData.image_difference_cnt }}
				</h3>
			</div>
			<div
				v-if="titleData.verify_error_cnt > 0"
				data-state="failed"
				data-name="影像校对失败数"
				@click="getDetailList"
			>
				<h2 data-state="failed" data-name="影像校对失败数">影像校对失败数</h2>
				<h3 class="underline" data-state="failed" data-name="影像校对失败数">
					{{ titleData.verify_error_cnt }}
				</h3>
			</div>
			<div
				v-if="titleData.no_verify_cnt > 0"
				data-state="unchecked"
				@click="getDetailList"
				data-name="影像未校对数"
			>
				<h2 data-state="unchecked" data-name="影像未校对数">影像未校对数</h2>
				<h3 class="underline" data-state="unchecked" data-name="影像未校对数">
					{{ titleData.no_verify_cnt }}
				</h3>
			</div>
			<div>
				<h2>已采集胶片数</h2>
				<h3>{{ titleData.archive_film_cnt }}</h3>
			</div>
			<div
				v-if="titleData.film_difference_cnt !== 0"
				@click="getDiffrenceDetail"
				data-state="film"
				data-name="胶片差异数"
			>
				<h2 data-state="film" data-name="胶片差异数">胶片差异数</h2>
				<h3 class="underline" data-state="film" data-name="胶片差异数">
					{{ titleData.film_difference_cnt }}
				</h3>
			</div>
		</section>
		<el-table
			:data="tableData"
			stripe
			style="width: 100%"
			stripez
			show-summary
			@cell-click="getCellData"
		>
			<el-table-column
				label="科室"
				prop="depart_name"
				align="left"
			></el-table-column>
			<el-table-column prop="source_exam_cnt" label="源检查数" align="left">
			</el-table-column>
			<el-table-column
				prop="archive_exam_cnt"
				label="已采集检查数"
				align="left"
			>
			</el-table-column>
			<el-table-column label="检查差异数" prop="exam_difference_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.exam_difference_cnt !== 0 }">{{
						row.exam_difference_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column
				prop="archive_image_cnt"
				label="已采集影像数"
				align="left"
			></el-table-column>
			<el-table-column label="影像差异数" prop="image_difference_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.image_difference_cnt !== 0 }">{{
						row.image_difference_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column label="影像校对失败数" prop="verify_error_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.verify_error_cnt !== 0 }">{{
						row.verify_error_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column label="影像未校对数" prop="no_verify_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.no_verify_cnt !== 0 }">{{
						row.no_verify_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column
				prop="archive_film_cnt"
				label="已采集胶片数"
				align="left"
			></el-table-column>
			<el-table-column label="胶片差异数" prop="film_difference_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.film_difference_cnt !== 0 }">{{
						row.film_difference_cnt
					}}</a>
				</template>
			</el-table-column>
		</el-table>
		<!-- 详情-->

		<el-dialog
			:visible.sync="dialogVisible"
			:title="title"
			width="960px"
			height="500px"
			@close="closeDialog"
		>
			<my-table
				:col-configs="colDetailConfigs"
				:list-loading="listLoading"
				:page-size="listQuery.pagesize"
				:table-data="tableDataDetail"
				:total="totalDetail"
				@refreshList="getErrorDeatil"
			>
				<el-table-column label="就诊类型" slot="patient_class" width="120px">
					<template slot-scope="{ row }">
						<span v-if="row.patient_class === 0">门诊</span>
						<span v-if="row.patient_class === 1">住院</span>
						<span v-if="row.patient_class === 2">急诊</span>
						<span v-if="row.patient_class === 3">体检</span>
						<span v-if="row.patient_class === 4">普通</span>
					</template>
				</el-table-column>
				<el-table-column
					label="失败原因"
					slot="error"
					width="180px"
					v-if="errorShow === true"
				>
					<template slot-scope="{ row }">
						<span>{{ row.error }}</span>
					</template>
				</el-table-column>
			</my-table>
		</el-dialog>
	</div>
</template>

<script>
import searchDate from '@/components/common/searchDate'
import Department from '@/components/common/Department'
import { groupBy, clone, compareArray, objSum } from '@/utils/base.js'
import { getCollQuality, get_img_detail, get_exam_detail, get_image_detail, get_film_detail } from 'api/data-watch'
import myTable from '@/components/myTable'

export default {
	name: 'collQuality',
	components: {
		searchDate,
		Department,
		myTable
	},
	data () {
		return {
			listQuery: {
				pagesize: 10,
				pageindex: 1,
				depart_code: null,
				start_date: null,
				end_date: null,
			},
			initTimeDatas: [
				{
					text: '不限',
					code: 'allTime',
				},
				{
					text: '最近半年',
					code: 'lastHalfYear',
				},
				{
					text: '最近一年',
					code: 'lastOneYear',
				},
			],
			titleData: {
				source_exam_cnt: 0,
				archive_exam_cnt: 0,
				exam_difference_cnt: 0,
				archive_image_cnt: 0,
				image_difference_cnt: 0,
				verify_error_cnt: 0,
				no_verify_cnt: 0,
				archive_film_cnt: 0,
				film_difference_cnt: 0,
			},
			// todo 需要修改
			tableData: [],
			total: null,
			listLoading: false,
			spanArr: [],//记录每一行的合并数
			pos: '',//记录索引
			colDetailConfigs: [
				// todo 字段缺失
				{
					type: 'index',
					label: '序号',
					width: '50px'
				},
				{
					prop: 'accession_number',
					label: '患者编号'
				},
				{
					prop: 'depart_name',
					label: '所属科室',
				},
				/* 	{
						prop: 'exam_type',
						label: '检查类型',
					}, */
				{
					prop: 'exam_item',
					label: '检查项目',
				},
				{
					prop: 'exam_item',
					label: '检查编号',
				},
				{
					prop: 'collection_time',
					label: '采集时间',
					sortable: false,
					width: '180px'
				},
				{ slot: 'error' }
			],
			tableDataDetail: [],
			totalDetail: 0,
			errorList: [
				{ label: '影像校对失败数', value: 'failed' },
				{ label: '影像未校对数', value: 'unchecked' },
				{ label: '检查差异数', value: 'exam' },
				{ label: '影像差异数', value: 'movie' },
				{ label: '胶片差异数', value: 'film' },
			],
			dialogVisible: false,
			title: '采集质量缺失',
			errorShow: false
		}
	},
	computed: {},
	created () {
		this.getList()
	},
	methods: {
		getChangeTime ( val ) {
			// 获取时间
			console.log( val )
			this.listQuery = Object.assign( this.listQuery, val )
			this.getList()
		},
		getDepartCode ( val ) {
			this.listQuery.depart_code = val
			this.getList()
		},
		getList () {
			getCollQuality( this.listQuery ).then( res => {
				if ( res.code === 0 ) {
					this.tableData = res.data
					// 求和
					try {
						if ( this.tableData.length > 0 ) {
							this.titleData = objSum( res.data, 'source_exam_cnt', 'archive_exam_cnt', 'exam_difference_cnt', 'archive_image_cnt', 'image_difference_cnt', 'verify_error_cnt', 'no_verify_cnt', 'archive_film_cnt', 'film_difference_cnt' )
						} else {
							this.titleData = {
								source_exam_cnt: 0,
								archive_exam_cnt: 0,
								exam_difference_cnt: 0,
								archive_image_cnt: 0,
								image_difference_cnt: 0,
								verify_error_cnt: 0,
								no_verify_cnt: 0,
								archive_film_cnt: 0,
								film_difference_cnt: 0
							}
						}
					} catch {
						console.log( 'error' );
					}
				}
			} )
		},
		getCellData ( row, column ) {
			// 单元格点击
			let obj = {
				row: row,
				column: column
			}
			// 获取详情
			let params = {
				state: null,
				depart_code: obj.row.depart_code
			}
			let missing_label = obj.column.label
			console.log( missing_label );
			let error = this.errorList.filter( error => {
				return error.label === missing_label
			} )
			params.state = error[ 0 ].value
			this.title = error[ 0 ].label
			// 如果数量为0 不请求
			if ( obj.row[ obj.column.property ] !== 0 ) {
				this.dialogVisible = true
				if ( params.state === 'unchecked' || params.state === 'failed' ) {
					// 校对
					this.getErrorDeatil( params )
				} else {
					// 采集
					// 判断
					let data = Object.assign( this.listQuery, { state: 'all' } )
					this.handleType( params.state, data )
				}
			}
		},
		getErrorDeatil ( params ) {
			let data = Object.assign( this.listQuery, params )
			// 获取详情
			get_img_detail( data ).then( res => {
				if ( res.code === 0 ) {
					// 展开弹窗
					// 渲染数据
					this.tableDataDetail = res.data
					this.totalDetail = res.page.total_count
				}
			} )
		},
		getDetailList ( $event ) {
			let state = $event.target.getAttribute( 'data-state' )
			let title = $event.target.getAttribute( 'data-name' )
			this.title = title
			let params = {
				state: state
			}
			// params = Object.assign( this.listQuery, params )
			this.dialogVisible = true
			this.errorShow = false
			this.getErrorDeatil( params )
		},
		getDiffrenceDetail ( $event ) {
			// 获取差异数
			let type = $event.target.getAttribute( 'data-state' )
			let title = $event.target.getAttribute( 'data-name' )
			this.errorShow = true
			this.title = title
			console.log( type );
			let params = { state: 'all' }
			let data = Object.assign( this.listQuery, params )
			this.dialogVisible = true
			this.handleType( type, params )
		},
		handleType ( type, params ) {
			// 判断类型 采集
			if ( type === 'exam' ) {
				// 检查
				get_exam_detail( params ).then( res => {
					if ( res.code === 0 ) {
						// 展开弹窗
						// 渲染数据
						this.tableDataDetail = res.data
						this.totalDetail = res.page.total_count
					}
				} )
			}
			if ( type === 'film' ) {
				// 胶片
				get_film_detail( params ).then( res => {
					if ( res.code === 0 ) {
						// 展开弹窗
						// 渲染数据
						this.tableDataDetail = res.data
						this.totalDetail = res.page.total_count
					}
				} )
			}
			if ( type == 'movie' ) {
				// 影像
				get_image_detail( params ).then( res => {
					if ( res.code === 0 ) {
						// 展开弹窗
						// 渲染数据
						this.tableDataDetail = res.data
						this.totalDetail = res.page.total_count
					}
				} )
			}
		},
		closeDialog () {
			// 弹窗关闭 初始化
			this.tableDataDetail = []
			this.title = null
			this.$set( this.listQuery, 'pageindex', 1 )
			this.$set( this.listQuery, 'pagesize', 10 )
		}

	}

}
</script>

<style scoped lang="less">
.container {
	padding: 0 10px;
}
.data {
	// height: 161px;
	padding: 23px 0;
	box-shadow: 0px 0px 14px 0px rgba(1, 1, 100, 0.1);
	border-radius: 8px;
	margin-bottom: 42px;
	div {
		height: 75px;
		width: 11%;
		display: inline-block;
		border-right: 1px solid #ddd;
		text-align: left;
		h3,
		h2 {
			margin-left: 40px;
		}
		h2 {
			font-size: 16px;
			font-weight: normal;
			height: 42px;
			line-height: 22px;
			color: #333333;
		}
		h3 {
			height: 42px;
			font-size: 30px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 42px;
			color: @49B523;
		}
	}
	> :last-child {
		border: none !important;
	}
	> :last-child,
	> :nth-child(5) {
		h3 {
			color: @FF6F6F;
		}
	}
	> :nth-child(6) {
		h3 {
			color: @333;
		}
	}
}
</style>
